<template>
	<section class="detail">
		<aside class="detail_main">
			<h2 class="bigtitle">{{title}}</h2>
			<p class="troduct">{{remark}}</p>
			<div class="main">
				<dl v-for="(item,index) in otherCatagroList">
					<dt @click="showdd">
						
						<span class="number" v-if="index<10">0{{index+1}}</span>
						<span class="number" v-else>{{index+1}}</span>
						<p class="title">{{item.title}}</p>
					</dt>
					<dd>
						{{item.content}}
					</dd>
				</dl>
			</div>
		</aside>
	</section>
</template>

<script>
	export default{
		data (){
			return {
				title:'',
				titleLink:this.$route.query.title,
				id:this.$route.query.id,
				remark:'',//备注
				otherCatagroList:[],
			}
			
		},
		created(){
			
			this.getCatagroInfo();
			this.getCatagroOtherInfo();
			this.setTitle();
			this.setActive();
		},
		mounted(){
			
		},
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.titleLink);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","02")
			},
			showdd:function(e){
				var el = e.target;
				var dt=$(el).parents('dl').find('dt');
				var d=$(el).parents('dl').find('dd');
				if(dt.hasClass('open')){
					dt.removeClass('open');
					d.slideUp();
					
				}
				else{
					dt.addClass('open');
					d.slideDown();
				}
			},
			getCatagroInfo(){
				//获取到备注和标题
				this.$ajax.get(this.global.url+"/api/user/tradeCatagroyInfo?id="+this.id).then(res=>{
					console.log(res)
					let data=res.data;
					if(data.code=='0'){
						this.title=data.data.name;
						this.remark=data.data.remark;
					}
				}).catch(error=>{
					console.log(error)
				})
			},
			getCatagroOtherInfo(){
				this.$ajax.get(this.global.url+"/api/user/tradeCatagroyOther?id="+this.id).then(res=>{
					console.log(res)
					//获取到其他的信息
					let data=res.data;
					if(data.code=="0"){
						if(data.data && data.data.records){
							this.otherCatagroList=data.data.records;
						}
					}
					
				}).catch(error=>{
					console.log(error)
				})
			},
		}
	}
</script>

<style scoped>
	.detail{
		padding:2.5rem 3.9% 2.5rem 2.6%;
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	.detail_main{
		background: #fff;
		padding:3.3rem 5.3%;
	}
	.detail_main .bigtitle{
		font-size: 1.2rem;
		color:#53306c;
		border-left:3px solid #53306c;
		padding-left:14px;
		line-height:1.3rem;
		font-weight: 600;
		margin-bottom: 1.6rem;
	}
	.troduct{
		font-size: 14px;
		color:#333333;
		line-height: 30px;
	}
	.main dl{
		margin-top:2.2rem;
	}
	.main dl dt{
		border-bottom: 1px solid #eaecef;
		padding-bottom: 10px;
		padding-right:1.2rem;
		position:relative;
		cursor: pointer;
	}
	.main dl dt:after{
		content: "";
		width:12px;
		height:20px;
		position: absolute;
		right:3px;
		top:0px;
		background: url(../../assets/down_icon.png) no-repeat left center;
		background-size: 100% auto;
	}
	.main dl dt.open:after{
		background: url(../../assets/up_icon.png) no-repeat left center;
		background-size: 100% auto;
	}
	.main dl dt .number{
		padding: 0px 7px;
	    height: 20px;
	    line-height: 20px;
	    position: relative;
	    color: #fff;
	    font-size: 12px;
	    background: #53306c;
	    display: block;
	    border-radius: 3px;
	    float: left;
	    margin-right: 14px;
	}
	.main dl dt .number:after{
		content: "";
	    width: 0px;
	    height: 0px;
	    border: 4px solid transparent;
	    border-left-color: #53306c;
	    position: absolute;
	    right: -8px;
	    top: 6px;
	}
	.main dl dt .title{
		display: block;
		overflow: hidden;
		font-size: 14px;
		color:#333333;
		line-height: 20px;
	}
	.main dl dd{
		padding:1.1rem 1.2rem 0px 10px;
		font-size: 14px;
		line-height:30px;
		color:#333333;
		display: none;
	}
</style>